{{extend 'layout.html'}}

<!-- load dojo and provide config via data attribute -->
<script src="{{=URL('static','dojo/dojo/dojo.js')}}" data-dojo-config="async: true, parseOnLoad: true"></script>


<style>

.form_grilla_pendientes {
	font-family: "Lucida Grande", sans-serif;
	font-size: 11px;
	position: relative;
}

/* styles for autoheight */
#grid {
	
	height: auto;
}
#grid .dgrid-scroller {
	position: relative;
	overflow-y: hidden;
}


has-ie-6 #grid {
	width: 100%;
	/* Give the grid a height.  Not optimal, but we'd need more JS for better. */
	height: 20em;
}

#grid .dgrid-header-scroll {
	display: none;
}
#grid .dgrid-header {
	right: 0;
}

#list-container {
	width: 100%;
	height: auto;
}


#tipo, #consulta, #subconsulta {
	position:absolute;
	width: 32.5%;
	height: 180px;
	top: 0;
	bottom: 0;
}

#tipo { left: 1%; }
#consulta { left: 33.5%; }
#subconsulta { left: 66%; }

#list-container .dgrid-row { 
				padding: 0.25em;
				cursor: default;
			}
	
</style>


<script type="text/javascript">
	
function unique(arr){
	//	create a unique list of items from the passed array
	//	(removing duplicates).  This is quick and dirty.

	//	first, set up a hashtable for unique objects.
	var obj = {};
	for(var i=0,l=arr.length; i<l; i++){
		if(!(arr[i] in obj)){
			obj[arr[i]] = true;
		}
	}

	//	now push the unique objects back into an array, and return it.
	var ret = [];
	for(var p in obj){
		ret.push(p);
	}
	ret.sort();
	return ret;
}	
	
	
	
require(
["dojo/_base/xhr", "dojo/_base/declare","dojo/_base/array","dgrid/List",
"dojo/store/Memory", "dojo/store/Observable", 
"dgrid/Grid", "dgrid/extensions/Pagination",
"dgrid/Selection", "dgrid/Keyboard", "dgrid/GridFromHtml",
"dojo/_base/lang", "dojo/_base/declare", "dojo/dom-construct", 
"dojo/dom-form", "dgrid/test/data/base", "dojo/domReady!"],
function(xhr, declare, arrayUtil, List, 
	Memory, Observable, 
	Grid, Pagination, 
	Selection, Keyboard, GridFromHtml,
	lang, declare, domConstruct, domForm){

	xhr.get({
			// URL de la request
			url: "load_pendientes",
			handleAs: "json",
			content: {
			},
			load: function(response) {
				cargar_grilla(response.data_list, response.rows);
			}
	});
	
	cargar_grilla = function(data_list, rows){
		
	data = {
		identifier: 'numero',
		label: 'numero',
		items: []
	};
	
	
	console.log(data_list);
	
	for(var i=0, l=data_list.length; i<rows; i++){
		data.items.push(lang.mixin({ id: i }, data_list[i%l]));
		console.log(lang.mixin({ id: i }, data_list[i%l]));
	}
	
	// global var testStore
	testStore = Observable(new Memory({data: data}));
	
	var CustomGrid = declare([Grid, Keyboard, Selection, Pagination]);
	
	getColumns2 = function(){
		return {
		fecha: 'Fecha',
		numero: 'Numero',
		nombre: 'Nombre',
		tipo: 'Tipo',
		consulta: 'Consulta',
		subconsulta: 'Subconsulta',
		comentario: 'Comentario'
		};
	};	
	
	window.grid = new CustomGrid({
		store: testStore,
		columns: getColumns2(),
		pagingLinks: false,
		pagingTextBox: false,
		firstLastArrows: true,
		pageSizeOptions: [10, 30, 50]
		}, "grid");
		
	var TunesList = declare([List, Selection, Keyboard]);

	//	define our three lists for the top.
	window.tipos = new TunesList({ selectionMode: "single" }, "tipo");
	//window.nombres = new TunesList({ selectionMode: "single" }, "nombre");
	window.consultas = new TunesList({ selectionMode: "single" }, "consulta");
	window.subconsultas = new TunesList({ selectionMode: "single" }, "subconsulta");
	
	//	create the unique lists and render them
	var desc_tipo = unique(arrayUtil.map(testStore.data, function(item){ return item.tipo; })),
		desc_consulta = unique(arrayUtil.map(testStore.data, function(item){ return item.consulta; })),
		desc_subconsulta = unique(arrayUtil.map(testStore.data, function(item){ return item.subconsulta; }));
	desc_tipo.unshift("All (" + desc_tipo.length + " Tipo consultante" + (desc_tipo.length != 1 ? "s" : "") + ")");
	desc_consulta.unshift("All (" + desc_consulta.length + " Tipo consulta" + (desc_consulta.length != 1 ? "s" : "") + ")");
	desc_subconsulta.unshift("All (" + desc_subconsulta.length + " Tipo subconsulta" + (desc_subconsulta.length != 1 ? "s" : "") + ")");
	
	tipos.renderArray(desc_tipo);
	consultas.renderArray(desc_consulta);
	subconsultas.renderArray(desc_subconsulta);
	
	var currentTipo; // updated on tipo select

	//	start listening for selections on the lists.
	tipos.on("dgrid-select", function(e){
		//	filter the consultas, subconsultas and grid
		var
			row = e.rows[0],
			filter = currentTipo = row.data,
			cons;
		if(row.id == "0"){
			//	remove filtering
			cons = unique(arrayUtil.map(testStore.data, function(item){ return item.consulta; }));
			grid.query = {};
		} else {
			//	create filtering
			cons = unique(arrayUtil.map(arrayUtil.filter(testStore.data, function(item){ return item.tipo == filter; }), function(item){ return item.consulta; }));
			grid.query = { "tipo": filter };
		}
		cons.unshift("All (" + cons.length + " Consulta" + (cons.length != 1 ? "s" : "") + ")");
						
		consultas.refresh();	//	clear contents
		consultas.renderArray(cons);
		consultas.select(0); //	reselect "all", triggering albums+grid refresh
	});
	
	consultas.on("dgrid-select", function(e){
		//	filter the albums, grid
		var row = e.rows[0],
			filter = row.data, sub;
		if(row.id == "0"){
			if(tipos.selection[0]){
				//	remove filtering entirely
				sub = unique(arrayUtil.map(testStore.data, function(item){ return item.subconsulta; }));
			} else {
				//	filter only by tipo
				sub = unique(arrayUtil.map(arrayUtil.filter(testStore.data, function(item){ return item.tipo == currentTipo; }), function(item){ return item.subconsulta; }));
			}
			delete grid.query.consulta;
		} else {
			//	create filter based on consulta
			sub = unique(arrayUtil.map(arrayUtil.filter(testStore.data, function(item){ return item.consulta == filter; }), function(item){ return item.subconsulta; }));
			grid.query.consulta = filter;
		}
		sub.unshift("All (" + sub.length + " Subconsulta" + (sub.length != 1 ? "s" : "") + ")");

		subconsultas.refresh(); //	clear contents
		subconsultas.renderArray(sub);
		subconsultas.select(0); //	reselect "all" item, triggering grid refresh
	});
	

	subconsultas.on("dgrid-select", function(e){
		//	filter the grid
		var row = e.rows[0],
			filter = row.data;
		if(row.id == "0"){
			// show all albums
			delete grid.query.subconsulta;
		} else {
			grid.query.subconsulta = filter;
		}
		grid.refresh();
	});

	//	set the initial selections on the lists.
	tipos.select(0);
	
	
	document.getElementById("resolverSelected").onclick = function(){
		for (var i in grid.selection) {
			// Each key in the selection map is the id of the item,
			window.location = "{{=URL(c = 'pendientes', f = 'resolve')}}/" + i;
		}
	};
	
	};

})
</script>

<button type="button" id="resolverSelected">Resolver seleccionado</button>
{{=form}}

